<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="custom-tree-container">
  <div class="block">
     <!-- show-checkbox  -->
    <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
      <i :class="data.icon" ></i>
      {{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)"
            v-if='data.type=="menu"'
            >
            添加菜单
            
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)"
            v-if='data.type=="menu"'
            >
            添加按钮
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => alter(node, data)">
            修改
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <div></div>
  </div>
</div>
 <el-button type="primary" class="btn-per" @click="()=>append_main()">添加主菜单</el-button>
 <el-button type="primary" class="btn-per">确认保存</el-button>
        </div>

<el-dialog :title="cag_menu" :visible.sync="dialogFormVisible">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="菜单名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm()">立即创建</el-button>
    <el-button @click="dialogFormVisible=false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
    </div>
</template>

<script>
let id = 1000;
    export default {
        data: function(){
      const data = [
      //   {
      //   id: 1,
      //   label: '一级 1',
      //   children: [{
      //     id: 4,
      //     label: '二级 1-1',
      //     children: [{
      //       id: 9,
      //       label: '三级 1-1-1'
      //     }, {
      //       id: 10,
      //       label: '三级 1-1-2'
      //     }]
      //   }]
      // }, {
      //   id: 2,
      //   label: '一级 2',
      //   children: [{
      //     id: 5,
      //     label: '二级 2-1'
      //   }, {
      //     id: 6,
      //     label: '二级 2-2'
      //   }]
      // }, {
      //   id: 3,
      //   label: '一级 3',
      //   children: [{
      //     id: 7,
      //     label: '二级 3-1'
      //   }, {
      //     id: 8,
      //     label: '二级 3-2'
      //   }]
      // }
      ];
      return {
        dialogFormVisible:false,
        data: JSON.parse(JSON.stringify(data)),
        cag_menu:'添加菜单',
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      }
        },

    created(){
      this.getData();
    },

    
    methods: {
      append_main() {
        this.chag_menu(1)
      },

      append(data) {
        this.chag_menu(1)
        const newChild = { id: id++, label: 'menu', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      alter(node, data){
        this.chag_menu(2)
        console.log(node,data)
      },
      chag_menu(index){
        this.dialogFormVisible = true
        index === 1 ? this.cag_menu = '添加菜单':'修改菜单'
      },

      submitForm(){

      },

      getData(){
      this.$post('admin/index/index').then( res =>{

        // var i= 0;
        let old = res.data.data.sort(this.$objectArraySort('int_sort'))
        old = old.map(res=>{
          // res.id = i++;
          res.label=res.name;
          return res;
        })
        let data=[];
        for(var i = 0; i<3; i++){
          data.push(old.filter(res=>res.sortstring.split('-').length-1==i))
        }

        for(var i=data.length-1;i>=0;i--){
          if(i){
           data[i-1].forEach(res1 => {
              data[i].forEach(res2 =>{
                console.log()
                if(res1.sortstring==res2.sortstring.substring(0,res2.sortstring.lastIndexOf('-'))){
                  if(!res1.children){
                    res1.children=[]
                  }
                  res1.children.push(res2)
                }
              })
            })
          }
        }
               this.data=JSON.parse(JSON.stringify(data[0]))   
          // res.id = i++;
          // return res;
        console.log(this.data)
         })
      }
    }
    }
</script>

<style lang='scss' scoped>
.logout{
    color: #409EFF;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
.container{
  text-align: right;
  .btn-per{
    margin-top:30px;
  }
}

</style>